<template>
  <!-- 数据审核 -->
  <div id="DataAudit">
    <div class="dataAudit-search">
      <span>审批流程：</span>
      <el-select v-model="approveProcess" @change="selectChange">
        <el-option v-for="(item, index) in options2" :key="index" :label="item" :value="item" />
      </el-select>

      <span style="margin-left:0.5rem;">任务状态：</span>
      <el-select v-model="taskStatus" @change="selectChange">
        <el-option v-for="(item, index) in options1" :key="index" :label="item.name" :value="item.code" />
      </el-select>
      <p>
        <el-button type="primary" @click="adoptClick" v-if="taskStatus=='todo'">批量同意</el-button>
        <el-button type="primary" @click="rejectClick" v-if="taskStatus=='todo'">批量退回</el-button>
      </p>
    </div>
    <el-table ref="dataAuditTable" :data="list" style="width: 100%;" @selection-change="handleSelectionChange" v-loading="loding" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="#fff">
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column label="数据类别" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.materialType | dataFormate }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="approveProcess" label="流程审批类别" align="center" width="150" />
      <el-table-column prop="materialName" label="数据名称" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="submitter" label="提交人" align="center" width="100" />
      <el-table-column prop="submitTime" label="提交时间" align="center" width="150" />
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-tooltip v-for="(item, index) in operation" :key="index" effect="dark" :content="item.label" placement="top">
            <el-button type="text" v-if="item.key.indexOf(taskStatus)>-1" @click.stop="buttonClick(scope.$index, scope.row, item)">{{item.label}}</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        popper-class="DataAcquisition_fenye"
        :current-page="pageNum"
        background
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog title="流程详情" :visible.sync="ProcessDesc" center width="80%" custom-class="ProcessDesc-dialog">
      <ul class="ProcessDesc">
        <li class="list-wrapper" v-for="(item, index) in ProcessList" :key="index">
          <!-- 流程节点为开始与结束的，class为start与over。流程当前节点为数组最后一条数据，判断数组最后一条数据状态是否为结束，不是结束class为now，是结束class为over -->
          <div class="list" :class="
          index=='0'?'start':'' || 
          index == ProcessList.length-1 && item.activityName != '结束'?'now':'' || 
          item.activityName =='结束' ?'over':''">
            <p>{{item.assignee}}</p>
            <span>{{item.activityName}}</span>
            <!-- 当前节点不为结束状态时，显示当前审核人，为结束状态时，隐藏 -->
            <div class="assignee" v-if="index == ProcessList.length-1 && item.activityName !='结束'">当前审核人：{{item.assignee}}</div>
          </div>
        </li>
        <!-- 数组最后一条数据状态不为结束时，显示标签 -->
        <li class="list-wrapper" v-if="ProcessList.length>0 && ProcessList[ProcessList.length-1].activityName !='结束'">
          <div class="list over">
            <p>完成</p>
            <span>审核</span>
          </div>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer" v-if="taskStatus=='todo'">
        <el-button type="primary" @click="onSubmit('adopt', [bpcPid])">审核通过</el-button>
        <el-button type="primary" @click="onSubmit('reject', [bpcPid])">审核退回</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="dataTitle" :visible.sync="Playvideo" center class="videoDialog" @close="closeVideo">
      <player :video-url="previewUrl" :state="Playvideo" />
    </el-dialog>
    <el-dialog :title="dataTitle" :visible.sync="Playvoice" center @close="closeVoice">
      <voice-Play :title="dataTitle" :src="previewUrl" :state="Playvoice" />
    </el-dialog>
  </div>
</template>

<script>
import player from '@/components/VideoPlay'
import VoicePlay from '@/components/VoicePlay'

export default {
  name: 'DataAudit',
  components: { player, VoicePlay },
  data() {
    return {
      approveProcess: '',  // 流程审批类别
      taskStatus: 'todo',  // 任务状态
      list: [],            // table数据列表
      total: 0,            // 数据总条目
      pageNum: 1,          // 当前页码
      pageSize: 10,        // 每页数据条目
      options1: [],        // 任务状态select
      options2: [],        // 审批流程select
      selection: [],       // table多选数据集
      loding: true,        // table loding加载遮罩层
      ProcessDesc: false,  // 流程详情弹窗开关
      ProcessList: [],     // 流程
      dataTitle: '',       // 素材标题
      Playvideo: false,    // 视频
      Playvoice: false,    // 音频
      previewUrl: '',      // 素材详情url
      bpcPid: ''           // 点击流程详情后，点击的数据pid
    }
  },
  computed: {
    // 数据可进行的操作项
    operation() {
      const svgList = [
        { label: '同意', value: 'adopt' ,key: ['todo']},
        { label: '退回', value: 'reject', key: ['todo'] },
        { label: '流程详情', value: 'bpcDetail',key: ['todo', 'done'] },
        { label: '素材详情', value: 'dataDetail',key: ['todo', 'done'] }
      ]
      return svgList
    }
  },
  created() {
    // 状态下拉框  就是任务状态的
    this.$api.getDataAuditStatus().then((response) => {
      if (response.data.status == 1) {
        this.options1 = JSON.parse(JSON.stringify(response.data.data))
        this.taskStatus = this.options1[0].code
          // 审批流程下拉框
        this.$api.getApproveProcess().then((response) => {
          if (response.data.status == 1) {
            this.options2 = JSON.parse(JSON.stringify(response.data.data))
            this.approveProcess = this.options2[0]
            const obj = {
              taskStatus: this.taskStatus,
              approveProcess: this.approveProcess,
              pageNum: 1,
              pageSize: 10,
              processState:2
            }
            // 获取到任务状态与审批流程信息后，将参数组装，请求数据列表
            this.getData(obj)
          } else {
            this.$message.error(response.data.msg)
          }
        })
      } else {
        this.$message.error(response.data.msg)
      }
    })
  },
  methods: {
    // 请求数据列表
    getData(obj) {
      this.loding = true
      this.$api.getDataAudit(obj).then((response) => {
        this.list = []
        if (response.data.status == 1) {
          setTimeout(() => {
            this.loding = false
            this.list = response.data.data.list
            this.total = response.data.data.list.length
          }, 0.5 * 1000);
        } else {
          setTimeout(() => {
            this.loding = false
            this.$message.error(response.data.msg)
          }, 0.5 * 1000);
        }
      }).catch(() => this.loding = false)
    },
    // 切换审批流程或切换审批状态 select
    selectChange() {
      const obj = {
        taskStatus: this.taskStatus,
        approveProcess: this.approveProcess,
        pageNum: 1,
        pageSize: 10,
        processState:2
      }
      // 切换审批流程或切换审批状态后重新请求列表
      this.getData(obj)
    },
    // 选中状态
    handleSelectionChange(data) {
      // table中勾选数据发生变化后，先置空selection，防止数据重复，再进行赋值
      this.selection = []
      for (let i in data) {
        this.selection.push(data[i].pid)
      }
    },
    // 批量同意
    adoptClick() {
      // 如未勾选数据，则不触发请求
      if (this.selection.length > 0) {
        this.onSubmit('adopt', this.selection)
      }
    },
    // 批量退回
    rejectClick() {
      // 如未勾选数据，则不触发请求
      if (this.selection.length > 0) {
        this.onSubmit('reject', this.selection)
      }
    },
    // 提交
    onSubmit(type, data) {
      const form = {
        taskStatus: this.taskStatus,
        approveProcess: this.approveProcess,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        processState: this.processState
      }
      // 根据接收到的type类型，判断是同意还是退回
      if (type == 'adopt') { // 同意
        this.$confirm('同意审核通过！', '', {
          cancelButtonText: '取消',
          confirmButtonText: '同意',
          center: true
        }).then(() => {
          // 请求审核通过接口，将选中的数据传给后台，请求成功后，将页面上的选中状态清空，并重新请求列表
          let obj = {
            pidList: data,
            approveTag: 'yes'
          }
          this.$api.getExamine(obj).then((response) => {
            if (response.data.status == 1) {
              this.ProcessDesc =false
              this.selection = []
              this.$refs.dataAuditTable.clearSelection()
              this.$message.success(response.data.msg)
              this.getData(form)
            } else {
              this.$message.error(response.data.msg)
            }
          })
        }).catch(() => {})
      } else if (type == 'reject') { // 退回
        this.$confirm('是否确认退回！', '', {
          cancelButtonText: '取消',
          confirmButtonText: '同意',
          center: true
        }).then(() => {
          // 请求审核退回接口，将选中的数据传给后台，请求成功后，将页面上的选中状态清空，并重新请求列表
          let obj = {
            pidList: data,
            approveTag: 'no'
          }
          this.$api.getExamine(obj).then((response) => {
            if (response.data.status == 1) {
              this.ProcessDesc =false
              this.selection = []
              this.$refs.dataAuditTable.clearSelection()
              this.$message.success(response.data.msg)
              this.getData(form)
            } else {
              this.$message.error(response.data.msg)
            }
          })
        }).catch(() => {})
      } else { // 详情

      }
    },
    // 操作
    buttonClick(index, data, value) {
      // 对单条数据进行操作，在点击的同时，给当前数据添加上选中状态
      // 判断点击的操作按钮是同意/退回/流程详情/素材详情
      if (value.key.length>1) {
        this[value.value](data)
      } else {
        this.onSubmit(value.value, [data.pid])
      }
      this.$refs.dataAuditTable.toggleRowSelection(data)
    },
    // 流程详情
    bpcDetail(data) {
      this.$api.getBpcDetails({pid: data.pid}).then((response) => {
        if (response.data.status == 1) {
          this.ProcessDesc = true
          this.bpcPid = data.pid
          this.ProcessList = response.data.data
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    // 素材详情
    dataDetail(data) {
      let key = data.materialType
      switch (key) {
        case 'news':
          this.$router.push({
            path: `/Dashboard/dashboardDetails`,
            query: {
              id: data.materialId
            }
          })
          break;
        case 'image':
          this.$api.getDataDetails({id: data.materialId}, key).then((response) => {
            if (response.data.status == 1) {
              let file = response.data.data.mediaFile
              window.open(file.uploadUrl, '_blank')
            }
          })
          break;
        case 'file':
          this.$api.fileDownload({ id: data.materialId }).then((response) => {
            const blobUrl = window.URL.createObjectURL(response.data)
            const link = document.createElement('a')
            document.body.appendChild(link)
            link.style.display = 'none'
            link.href = blobUrl
            // 设置a标签的下载属性，设置文件名及格式，后缀名最好让后端在数据格式中返回
            link.download = data.materialName
            // 自触发click事件
            link.click()
            document.body.removeChild(link)
            window.URL.revokeObjectURL(blobUrl)
          })
          break;
        case 'web':
          this.$api.htmlListDetail({id: data.materialId}).then((response) => {
            if (response.data.status == 1) {
              let res = response.data.data.mediaWeb
              window.open(res.url, '_blank')
            }
          })
          break;
        default: // voice/vedio
          this.$api.getDataDetails({id: data.materialId}, key).then((response) => {
            if (response.data.status == 1) {
              let file = response.data.data.mediaFile
              this[`Play${key}`] = true
              this.dataTitle = file.fileName
              this.previewUrl = file.uploadUrl
            }
          })
          break;
      }
    },
    // 关闭视频
    closeVideo() {
      this.Playvideo = false
      this.dataTitle = ''
      this.previewUrl = ''
    },
    // 关闭音频
    closeVoice() {
      this.Playvoice = false
      this.dataTitle = ''
      this.previewUrl = ''
    },
    // 改变每页数据条目数
    handleSizeChange(val) {
      const obj = {
        type: this.tabs,
        searchValue: this.form.searchValue,
        taskStatus: this.form.taskStatus,
        approveProcess: this.form.approveProcess,
        pageNum: this.pageNum,
        pageSize: val
      }
      this.searchClick(obj)
    },
    // 当前第几页
    handleCurrentChange(val) {
      const obj = {
        type: this.tabs,
        searchValue: this.form.searchValue,
        taskStatus: this.form.taskStatus,
        approveProcess: this.form.approveProcess,
        pageNum: val,
        pageSize: this.pageSize
      }
      this.searchClick(obj)
    }
  }
}
</script>
<style lang="scss" scoped>
#DataAudit {
  width: 100%;
  padding: 0.2rem;
  background: #fff;
  border-radius: 0.05rem;
  >>>* { font-size: 0.16rem; }
  >>>.elTabs {
    border: none;
    .elTabs_span {
      font-size: 0.16rem;
      svg {
        margin-right: 0.1rem;
        width: 0.2rem;
        height: 0.2rem;
        vertical-align: -0.2em;
      }
    }
    .el-tabs__header .el-tabs__item {
      color: #333;
    }
    .el-tabs__header .el-tabs__item:not(.is-disabled):hover,
    .el-tabs__header .el-tabs__item.is-active {
      color: #409EFF;
    }
  }
  >>>.svgIcon{
    font-size: 0.25rem  !important;
    margin: 0 0.1rem;
    color: #666;
    cursor: pointer;
  }
  .pagination {
    width: 100%;
    background: #fff;
    text-align: right;
    padding-top: 0.2rem;
  }
  .ProcessDesc {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 0 1rem;
    text-align: center;
    .list-wrapper {
      position: relative;
      display: inline-block;
      .list {
        min-width: 1rem;
        height: 0.6rem;
        background: #66B1FF;
        border-radius: 0.05rem;
        text-align: center;
        color: #fff;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        padding: 0.1rem;
        margin: 0 0.5rem;
        position: relative;
        >p {
          font-size: 0.16rem;
          font-weight: bold;
          margin: 0;
        }
        >span {
          font-size: 0.14rem;
        }
        .assignee {
          position: absolute;
          bottom: -0.5rem;
          color: #66B1FF;
          font-weight: bold;
          font-size: 0.16rem;
        }
      }
      .list::before {
        content: '';
        width: 0.95rem;
        position: absolute;
        right: -0.95rem;
        top: 50%;
        border-bottom: 0.03rem solid #409EFF;
      }
      .start,
      .over {
        background: #00B050;
      }
      .now {
        background: #ED7D31;
        margin-right: 1rem;
      }
      .now::before {
        border-bottom: 0.04rem dotted #409EFF;
        width: 1.2rem;
        right: -1.28rem;
      }
      .start {margin-left: 0;}
      .over {margin-right: 0;}
      .over::before {display: none;}
    }
    .list-wrapper::after {
      content: '>';
      color: #409EFF;
      font-size: 0.28rem;
      font-weight: bold;
      right: -0.5rem;
      top: 0.16rem;
      position: absolute;
    }
    .list-wrapper:nth-last-of-type(1)::after {
      display: none;
    }
  }
  .videoDialog {
    >>>.el-dialog {
      border-radius: 0.1rem;
      overflow: hidden;
      .el-dialog__header {
        padding: 0;
        height: 0.5rem;
        background-image: linear-gradient(0deg, #232323 0%,#333 30%, #000 100%);
        .el-dialog__title {
          font-size: 0.2rem !important;
          line-height: 0.51rem;
          color: #999;
        }
        .el-dialog__headerbtn {
          top: 0.11rem;
          right: 0.2rem;
          .el-dialog__close {
            color: #999;
            font-size: 0.3rem !important;
          }
        }
      }
      .el-dialog__body {
        background: #232323;
        padding: 0.1rem;
      }
    }
  }
}
</style>
